<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<body>
	<!-- HEADER -->
	<header th:fragment="top">
		<input type="hidden" id="loginId" name="loginId" th:value="${session.loginId}"/>
		<input type="hidden" id="currentAccountId" name="currentAccountId" th:value="${session.user.id}"/>
		<div id="top" class="container"  style="background: #ffffff" v-cloak="v-cloak">
				<div class="navbar-brand" style="padding: 0%;width: 13.2%;">
					<!-- COMPANY LOGO -->
					<div class="logo-top" style="background: #353B4C;">
						<a  href="/index">
							<img th:src="${session.systemInfo.indexImg_url==null}?'/webResources/img/logo/main.png':${session.systemInfo.indexImg_url}" style="width: 100px;height: 36px;left:3%;"/>
							<!--<img th:src="${session.systemInfo.indexImg_url}" style="height: 30px; width: 186px;top: 10px;left:25px"/>-->
						</a>
						<div style="margin-left: 110%;width: 500px;padding-top: 10px;color: #333333;line-height: 30px;">
							<span th:text="${session.systemInfo.name==null}?'产品数据管理系统':${session.systemInfo.name}"></span>
							<span style="font-size: 18px;" th:text=" '  V' + (${session.systemInfo.version==null}?'1.0':${session.systemInfo.version})"></span>
						</div>
					</div>
					<!-- /COMPANY LOGO -->
					<!-- TEAM STATUS FOR MOBILE -->
					<div class="visible-xs">

						<a href="#" class="team-status-toggle switcher btn dropdown-toggle">
							<i class="fa fa-users"></i>
						</a>
					</div>
					<!-- /TEAM STATUS FOR MOBILE -->
					<!-- SIDEBAR COLLAPSE -->
					<!--<div id="sidebar-collapse" class="sidebar-collapse btn">
						<i id="sidebar-click" class="fa fa-bars"
							data-icon1="fa fa-bars"
							data-icon2="fa fa-bars" ></i>
					</div>-->
					<!-- /SIDEBAR COLLAPSE -->
				</div>

				<!-- BEGIN TOP NAVIGATION MENU -->
				<ul class="nav navbar-nav pull-right">
					<li class="dropdown user cn-li" th:if="${#locale.getLanguage().equals('en')}">
						<a href="javascript:customPost('/i18n/changeSessionLanauage',{'lang':'zh'})" class="dropdown-toggle" id="cn-top">
							<img id="cn-top-img" alt="" src="/webResources/img/language/home_icon_cn.png"/>
						</a>
					</li>
					<li class="dropdown user en-li" th:if="${#locale.getLanguage().equals('zh')}">
						<a href="javascript:customPost('/i18n/changeSessionLanauage',{'lang':'en'})" class="dropdown-toggle" id="en-top">
							<img id="en-top-img" alt="" src="/webResources/img/language/home_icon_en.png"/>
						</a>
					</li>
					<li class="dropdown user" style="margin-top: 5px;">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<span class="username" th:text="${session.user.name}" style="color: #9AABB7;">John Doe</span>
						</a>
					</li>
					<!-- BEGIN INBOX DROPDOWN -->
					<li  id="header-message">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="margin-top: -6px">
						<img src="/webResources/img/icon/message.png"/>
						<span class="badge">{{messages.records}}</span>
						</a>
						<ul class="dropdown-menu inbox" style="overflow:auto;height: 500px">
							<li class="dropdown-title">
								<span><i class="fa fa-envelope-o"></i> {{messages.records}} Messages</span>
								<span class="compose pull-right tip-right" title="Compose message">
									<li v-for="message in messages.content">
										<a href="#" v-on:click="viewMessageInfo(message.id)">
											<span class="body">
												<span class="from">{{message['from.name']}}</span>
												<span class="from">{{message.title}}</span>
												<span class="message">
													{{message.content}}
												</span>
												<span class="time">
													<i class="fa fa-clock-o"></i>
													<span>{{message.sendTime}}</span>
												</span>
											</span>
										</a>
									</li>
								</span>
							</li>
							<!-- <li class="footer">
								<a href="#">See all messages <i class="fa fa-arrow-circle-right"></i></a>
							</li> -->
						</ul>
					</li>
					<!-- END INBOX DROPDOWN -->
					<!-- BEGIN USER LOGIN DROPDOWN -->
					<li class="dropdown user" id="header-user">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<img alt="" src="/webResources/img/icon/right-head.png" />
						</a>
						<ul class="dropdown-menu">
							<li><a href="javascript:customPost('/logout',null)"><i class="fa fa-power-off"></i><span th:text="#{logOut}"  style="margin-left:5%"></span></a></li>
						</ul>
					</li>
					<!-- END USER LOGIN DROPDOWN -->
				</ul>
				<!-- END TOP NAVIGATION MENU -->
		</div>
	</header>
	<!--/HEADER -->
</body>

</html>
